<template>
  <div 
    :id="id" 
  />
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    props:['id','chartdata','title','subtext','xAxisDate','legend'],
    data() {
      return {
        chart: null,
      }
    },
    mounted() {
      setTimeout(() => {
        this.draw()
      })
      window.addEventListener('resize', this.resizeChart)
    },
    activated() {
      if (this.chart) {
        this.resizeChart()
      }
    },
    methods: {
      resizeChart() {
        this.chart.resize()
      },
      draw() {
        const { title,id,chartdata,subtext,xAxisDate,legend } = this
        this.chart = echarts.init(document.getElementById(id))
        const option = {
          title: {
            text: title? title:'',
            // subtext,
            // subtextStyle:{
              // align:'right',
              // width:30,
            // },
            left:'0'
          },
          tooltip: {
            trigger: 'item',
            // formatter:'{a}-{b}-{c}'
          },
          legend:{
            show:legend,
            data:chartdata.map(e=>e.name),
            right: 10,
            top: 0,
            x:'right',
            type:'scroll',
            // orient:'vertical'
          },
          dataZoom: [{type: 'inside'}],
          grid: {
            left: 30,
            right: 40,
            bottom: 30,
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAxisDate,
            axisTick: {show: false},
          },
          yAxis: {
            type: 'value',
            axisTick: {show: false},
          },
          series:chartdata.map(e=>{
            const { name,data } = e
            return{
              name,
              type:'line',
              smooth:'true',
              // stack: 'Total',
              data
            }
          })
        }
        this.chart.setOption(option)
      },
    },
    destroyed() {
      window.removeEventListener('resize', this.resizeChart)
    }
  }
</script>
<style lang="scss" scoped>
.main {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
}
</style>